<template>
	<view class="coupon-page">
		<!-- 状态页签 -->
		<u-tabs :list="tabList" :current="currentTab" @change="tabChange" :activeStyle="{color: '#ff2d51'}"
			:inactiveStyle="{color: '#666'}" lineColor="#ff2d51" :scrollable="true"></u-tabs>

		<!-- 优惠券列表 -->
		<scroll-view scroll-y class="coupon-list" :style="{height: scrollHeight + 'px'}" @scrolltolower="loadMore"
			refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<!-- 优惠券卡片 -->
			<view v-for="(item, index) in List" :key="item.id" class="coupon-card" 
			  :class="{
			    'coupon-available': item.status === 0,
			    'coupon-used': item.status === 1,
			    'coupon-expired': item.status === 2
			  }">
				<!-- 左侧金额 -->
				<view class="coupon-left">
					<view class="amount">
						<text class="symbol">¥</text>
						<text class="number">{{item.amount}}</text>
					</view>
					<view class="condition" v-if="item.condition">满{{item.condition}}元可用</view>
				</view>

				<!-- 右侧信息 -->
				<view class="coupon-right">
					<view class="coupon-name">{{item.name}}</view>
					<view class="coupon-time">有效期至：{{item.endTime}}</view>
					<view class="coupon-desc">{{item.desc}}</view>
					<!-- 使用按钮/状态 -->
					<view class="coupon-status">
						<u-button v-if="item.status === 0" type="error" size="mini" shape="circle" text="立即使用"
							@click="useCoupon(item)"></u-button>
						<u-tag v-else :text="getStatusText(item.status)" :type="getStatusTagType(item.status)"
							size="mini"></u-tag>
					</view>
				</view>

				<!-- 顶部标签 -->
				<view class="coupon-tag" v-if="item.tag">
					{{item.tag}}
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="load-status" @click="loadMore" v-if="this.List.length>0">
				<u-loadmore :status="loadStatus" :icon-type="loadStatus === 'loading' ? 'circle' : 'none'" />
			</view>

			<!-- 空状态 -->
			<u-empty v-if="List.length === 0 && !loading" mode="coupon"
				icon="http://cdn.uviewui.com/uview/empty/coupon.png" :text="emptyText"></u-empty>
		</scroll-view>
	</view>
</template>

<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return {
				loading: false,
				currentTab: 0,
				usingqty: 0, //已使用数量
				effectiveqty: 0, //有效数量
				expireqty: 0, //过期数量
				tabList: [{
						name: '可用',
						badge: {
							value: 0,
						}
					},
					{
						name: '已用',
						badge: {
							value: 0,
						},
						badge: {
							value: 0,
						}
					},
					{
						name: '已过期',
						badge: {
							value: 0,
						}
					}
				],
				scrollHeight: 0,
				List: [],
				loading: false,
				loadStatus: 'loadmore',
				refreshing: false,
				page: 1,
				pageSize: 10,
				hasMore: true
			}
		},
		computed: {
			emptyText() {
				return this.tabList[this.currentTab].name + '优惠券';
			}
		},
		onLoad() {
			this.calcScrollHeight();
			this.getCouponList();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		methods: {
			calcScrollHeight() {
				const systemInfo = uni.getSystemInfoSync();
				this.scrollHeight = systemInfo.windowHeight;
			},

			// 获取优惠券列表
			async getCouponList() {
				if (this.loading || !this.hasMore) return;
				try {
					this.loading = true;
					this.loadStatus = 'loading';
					let param = {
						usrid: uni.getStorageSync('usrid'),
						type: this.currentTab,
						page: this.page,
						pageSize: this.pageSize
					}
					uni.showLoading({
						title: '加载中...'
					});
					const res = await httpsend('getCouponList', JSON.stringify(param));
					if (res?.code === 1) {
						//商品订单信息
						if (this.page == 0) {
							this.List = res.data;
						} else {
							this.List = [...this.List, ...res.data];
						}
						this.usingqty = res.usingqty;
						this.effectiveqty = res.effectiveqty;
						this.expireqty = res.expireqty;
						this.tabList[0]['badge']['value'] = res.usingqty;
						this.tabList[1]['badge']['value'] = res.effectiveqty;
						this.tabList[2]['badge']['value'] = res.expireqty;
						this.List = this.List.filter(item => item.status == this.currentTab);
					} else {
						this.$api.msg(res.msg);
					}
					this.loading = false;
					uni.hideLoading();
					this.page++;
					// 模拟分页结束
					if (this.page >= 3) {
						this.hasMore = false;
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				} catch (err) {
					this.loading = false;
					uni.hideLoading();
					console.log('err', err);
				}
			},
			// 切换标签
			tabChange(item) {
				this.currentTab = item.index;
				this.page = 1;
				this.hasMore = true;
				this.List = [];
				this.getCouponList();
			},

			// 加载更多
			loadMore() {
				console.log('dd');
				if (this.loadStatus === 'nomore') return;
				this.getCouponList();
			},

			// 下拉刷新
			onRefresh() {
				this.refreshing = true;
				this.page = 1;
				this.hasMore = true;
				this.getCouponList();
			},

			// 获取优惠券样式类
			getCouponClass(status) {
				return {
					'coupon-available': status === 0,
					'coupon-used': status === 1,
					'coupon-expired': status === 2
				};
			},

			// 获取状态文本
			getStatusText(status) {
				const map = {
					0: '可用',
					1: '已使用',
					2: '已过期'
				};
				return map[status] || '';
			},

			// 获取状态标签类型
			getStatusTagType(status) {
				const map = {
					0: 'primary',
					1: 'info',
					2: 'warning'
				};
				return map[status] || 'info';
			},

			// 使用优惠券
			useCoupon(coupon) {
				uni.navigateTo({
					url: `/pages/goodsinfo/goodslist`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-page {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.coupon-list {
		padding: 20rpx;
	}

	.coupon-card {
		position: relative;
		display: flex;
		height: 180rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;

		&.coupon-available {
			background: linear-gradient(to right, #ff2d51, #ff6b81);
			color: #fff;

			.coupon-left {
				border-right: 1px dashed rgba(255, 255, 255, 0.3);
			}

			.coupon-tag {
				margin-right: 20rpx;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		&.coupon-used {
			background-color: #f5f5f5;
			color: #999;

			.coupon-left {
				border-right: 1px dashed #ddd;
			}

			.amount .number {
				color: #999;
			}
		}

		&.coupon-expired {
			background-color: #f5f5f5;
			color: #999;

			.coupon-left {
				border-right: 1px dashed #ddd;
			}

			.amount .number {
				color: #999;
			}
		}
	}

	.coupon-left {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		padding: 20rpx;

		.amount {
			display: flex;
			align-items: flex-start;
			margin-bottom: 10rpx;

			.symbol {
				font-size: 28rpx;
				line-height: 1;
				margin-top: 10rpx;
			}

			.number {
				font-size: 48rpx;
				font-weight: bold;
				line-height: 1;
			}
		}

		.condition {
			font-size: 22rpx;
		}
	}

	.coupon-right {
		flex: 1;
		padding: 20rpx;
		display: flex;
		flex-direction: column;

		.coupon-name {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.coupon-time {
			font-size: 22rpx;
			margin-bottom: 10rpx;
		}

		.coupon-desc {
			font-size: 22rpx;
			flex: 1;
		}

		.coupon-status {
			display: flex;
			justify-content: flex-end;
		}
	}

	.coupon-tag {
		position: absolute;
		top: 0;
		right: 0;
		padding: 4rpx 12rpx;
		font-size: 20rpx;
		border-bottom-left-radius: 12rpx;
		color: #fff;
	}

	/* uView 组件样式覆盖 */
	:deep(.u-tabs__wrapper__nav__item) {
		flex: none;
		padding: 0 30rpx;
	}

	:deep(.u-button) {
		height: 50rpx !important;
		line-height: 50rpx !important;
	}
</style>